<template>
  <div class="todo-list">
    <input type="text" v-model="state.item.name" />
    <input type="text" v-model="state.item.age" />
    <button @click="addFn">提交</button>
    <Com :data="data"></Com>
    <!-- <ul>
      <li v-for="item in state.list" :key="item.age">
        {{ item.name }}--{{ item.age }}
      </li>
    </ul> -->
  </div>
</template>
<script>
import { reactive, onMounted } from "vue";
import Com from "./Com.vue";
export default {
  setup() {
    const { state, addFn } = fn();
    const data = reactive({
      tableData: [],
    });
    onMounted(() => {
      setTimeout(() => {
        data.tableData = [1, 2, 5];
      }, 2000);
    });
    return {
      state,
      addFn,
      data,
    };
  },
  components: {
    Com,
  },
};
function fn() {
  const state = reactive({
    item: {
      name: "2",
      age: "2",
    },
  });
  function addFn() {
    state.item.name = "";
    state.item.age = "";

    console.log(state);
  }
  return {
    state,
    addFn,
  };
}
</script>
<style scoped></style>
